/* eslint  react/no-string-refs: 0 */
import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Table, Input, Grid, Form, Select, Tree, Button, Message, Icon, Dialog } from '@alifd/next';
import IconSvg from '#/components/IconSvg';
import { ApiOfGatewayDetail } from '#/utils/coreApiDefine'
import BaseInfo from './components/BaseInfo';
import Topology from './components/Topology';
import styles from './components/styles/styles';
import { ApiOfGatewayBatchEnable, ApiOfGatewayBatchDisable } from '#/utils/coreApiDefine'

const { Row, Col } = Grid;

export default class OperationPage extends Component {
  static displayName = 'OperationPage';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {
      baseInfo: {
        id: '',
        name: '',
        code: '',
        physicalConnType: '',
        config: '',
        createTime: '',
        connectRetry: '',
        connectTimeout: '',
        workMode: '',
        disabled:'',
        batched: false,
      },
    };
  }

  componentWillMount() {
    ApiOfGatewayDetail(this.props.match.params.code).then(response => {
      const baseInfo = Object.assign({}, this.state.baseInfo);
      for(let k in baseInfo) {
        baseInfo[k] = response.data[k]
      }
      this.setState({
        baseInfo,
      })
    })
  }

  onToggleBatch() {
    const info = {...this.state.baseInfo};
    let Api = info.batched ? ApiOfGatewayBatchDisable : ApiOfGatewayBatchEnable
    Dialog.confirm({
      title: '',
      content: '确认要' + (info.batched ? '关闭批处理' : '开启批处理') + '吗?',
      onOk: () => {
        Api(info.code).then(response => {
          Message.success('操作成功!');
          info.batched = !info.batched;
          this.setState({
            baseInfo: {...info}
          })
        }).catch(function (error) {
          console.log(error);
        });
      }
    });
  }

  render() {
    const statusIcon = () => {
      let iconClass = "#icon-tingzhi";
      if(!this.state.baseInfo.disabled) {
        iconClass = "#icon-yunhang";
      }
      return iconClass;
    }

    return (
      <div>
        <IceContainer>
          <Row gutter="20">
            <Col l="8">
              <BaseInfo info={ this.state.baseInfo } />
            </Col>
            <Col l="16">
              <div style={styles.infoColumn}>
                <h5 style={styles.infoColumnTitle}>状态<IconSvg iconClass={statusIcon()} style={{ margin: '0 10px' }} /></h5>
                <div style={{padding: '20px 0'}}>
                  <Row wrap>
                    <Col l="2">
                      <Button onClick={() => this.onToggleBatch()} 
                        type="primary"
                        aria-label="prompt button" 
                        size="small">
                        {this.state.baseInfo.batched ? '关闭批处理' : '开启批处理'}
                      </Button>
                    </Col>
                  </Row>
                </div>
              </div>
              <Topology gateway={this.props.match.params.code} />
            </Col>
          </Row>
        </IceContainer>
      </div>
    );
  }
}
